<template>
    <el-container class="main">    
        <el-header class="header">
            <com-header></com-header>
        </el-header>
        <el-container>
            <el-aside style="width:auto;" class="aside">
                <menu-list />
            </el-aside>
            <el-main class="main-contain">
                <div style="padding:50px;">
                    <div class="df ai-c">
                        <el-autocomplete
                            ref="autocomplete"
                            v-model="link"
                            :fetch-suggestions="querySearch"
                            @blur="oninput"
                            @select="handleSelect"
                            style="width:500px;margin-right:20px;"
                        >
                            <template #prepend>
                                <el-select v-model="agreement" style="width: 90px">
                                    <el-option label="http://" value="http://" />
                                    <el-option label="https://" value="https://" />
                                </el-select>
                            </template>
                            <template #append>
                                <el-button type="primary" :disabled="!btnActive" class="primarybtn" @click="inputLink">{{menu.length?'刷新':'确定'}}</el-button>
                            </template>
                        </el-autocomplete>
                        <div class="c-blue">确认后sessionSorage会储存输入地址</div>
                    </div>

                    <div>
                        <div class="mt-20">{{jsontext}} <span class="pl-20" :class="{'c-red':!appjsonok}">{{appjsonok?'访问正常':'访问失败'}}</span></div>
                        <div class="mt-20">{{linktext}} <span class="pl-20" :class="{'c-red':!linkok}">{{linkok?'访问正常':'访问失败'}}</span></div>
                    </div>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
// import appJson from '/app.json';
// import appJson from '../../../demo/thirdparty_vue2demo/app.json';
import menu from "../components/menu.vue";
import header from "../components/header.vue";
import myAxios from "../utils/index";
import { mapState } from 'vuex';


export default {
    data(){
        return {
            agreement: "http://",
            saveApp: "",
            linkok: false,
            appjsonok: false,

            appJson: {},
            roles: false,
            role: 0,
            domain: "",
            link: "",
            linkurl: "",
            btnActive: false,
            menu: [],
        }
    },
    components: {"menu-list":menu, "com-header":header},
    created(){
        if(this.roleInfo){
            if(this.roleInfo.linkurl){
                this.linkurl =  this.roleInfo.linkurl.replace(/^https?:\/\//,"");
                if(this.linkurl){this.link = this.linkurl;}
                if(/^https?:\/\//.test(this.roleInfo.linkurl)){
                    this.agreement = this.roleInfo.linkurl.match(/^(https?:\/\/)/)[1];
                }
                this.oninput();
            }
            this.roles = this.roleInfo.roles;
            this.menu = this.roleInfo.menu;
            this.iframe = this.roleInfo.iframe;
        }
    },
    methods: {
        setAppjson(){
            this.appJson = this.saveApp;
            const rls = this.appJson.menu;
            if(!rls){return}
            
            if(Array.isArray(rls)){
                // 上次角色
                if(sessionStorage.getItem('roleindex')){
                    let index = Number(sessionStorage.getItem('roleindex'));
                    if(rls.length>index){this.role = index;}
                }

                this.roles = rls;
                this.menu = rls[this.role].menu;
                this.iframe = rls[this.role].framework==='iframe';
            }else{
                this.roles = false;
                this.menu = rls.menu;
                this.iframe = rls.framework==='iframe';
            }
            this.$store.commit("setRoleInfo",{
                roleIndex: this.role,
                linkurl: this.agreement + this.link,
                menu: this.menu,
                roles: this.roles,
                iframe: this.iframe,
                shadow_dom: rls[this.role].shadow_dom,
                domain: this.appJson?.siteInfo?.apiURL || "",
                siteName: this.appJson?.siteInfo?.siteName || "",
            });
        },
        async inputLink(){
            this.linkurl = this.agreement + this.link;
            sessionStorage.setItem("linkurl",this.agreement + this.link);
            if(this.menu.length){
                await this.oninput();
            }
            this.setAppjson();
        },
        async oninput(){
            if(/^\s*https?\:\/\//.test(this.link)){
                this.link = this.link.replace(/^\s*https?\:\/\//,'');
            }
            this.saveApp = "";
            this.btnActive = false;
            this.linkok = false;
            this.appjsonok = false;
            await myAxios({url: this.agreement + this.link, responseType: 'blob' }).then((res)=>{
                if(res){ this.linkok = true; }
            }).catch(()=>{});
            await myAxios({url: this.agreement + this.link + "/app.json"}).then((res)=>{
                if(res && res.data){
                    this.btnActive = true;
                    this.appjsonok = true;
                    this.saveApp = res.data;
                    this.saveLink(this.link);
                }
            }).catch(()=>{})
        },
        CheckStatus(url){
            XMLHTTP = new ActiveXObject("Microsoft.XMLHTTP")
            XMLHTTP.open("HEAD",url,false)
            XMLHTTP.send()
            return XMLHTTP.status==200
        },
        querySearch(queryString, cb){
            let arr = localStorage.getItem('savelink');
            arr = arr?JSON.parse(arr):[];
            cb(JSON.parse(JSON.stringify(arr)));
        },
        saveLink(link){
            let arr = localStorage.getItem('savelink');
            arr = arr?JSON.parse(arr):[];
            let islink = arr.find((item)=>{
                return item?.value==link;
            });
            if(islink){return};

            arr.push({value:link});
            localStorage.setItem('savelink',JSON.stringify(arr));
        },
        handleSelect(){
            this.$refs.autocomplete.close()
        },
    },
    computed: {
        ...mapState(['roleInfo']),
        jsontext(){
            return this.agreement + this.link + (/\/$/.test(this.link)?'':'/') + "app.json";
        },
        linktext(){
            return this.agreement + this.link + (/\/$/.test(this.link)?'':'/') + "index.html";
        }
    }
}
</script>

<style scoped >
.primarybtn{background:#409eff;}
.pl-20{padding-left:20px;}
.wi{font-size:22px;}
.header{height:50px; background-color: #242b35; color:#ffffff;}
.aside{background-color: #1c222b;}
.main{min-height:100vh;}
.main-contain{padding:0; height:calc(100vh - 50px); overflow:auto;}
</style>